<template>
  <div>
    <el-upload
      class="upload"
      drag
      :action="actionUrl"
      :multiple="true"
      :show-file-list="false"
      accept=".zip"
      :on-success="fileUploadSuccess"
      :on-error="fileUploadFail"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
    </el-upload>
    <div class="tag-group" v-show="showTagRow">
      <div class="header">已上传未解析的报文</div>
      <el-tag
        v-for="(item, index) of unresolvedMessage"
        :key="index"
        type="warning"
        effect="dark"
        closable
        :hit="true"
        @close="closeTag(item)"
      >{{item}}</el-tag>
    </div>
  </div>
</template>
<script>
import { Button, Upload, Tag } from 'element-ui';
import { getUnresolveMessageList, deleteUpoladMessage, startResolveMessage } from '@/api/bank-financing.js';
export default {
  name: 'upload-file-content',
  components: {
    [Button.name]: Button,
    [Upload.name]: Upload,
    [Tag.name]: Tag
  },
  props: {
    refreshTimes: Number
  },
  data () {
    return {
      unresolvedMessage: [],
      actionUrl: process.env.BASE_URL + '/bank-financing/upload.do'
    };
  },
  watch: {
    refreshTimes () {
      this.refreshUnrosolveMessageList();
    }
  },
  mounted () {
    this.refreshUnrosolveMessageList();
  },
  computed: {
    showTagRow () {
      return this.unresolvedMessage.length != 0;
    }
  },
  methods: {
    refreshUnrosolveMessageList () {
      getUnresolveMessageList().then(res => {
        this.unresolvedMessage = res;
      }).catch(errMessage => {
        this.$alert(errMessage.msg);
      })
    },
    fileUploadSuccess (response, file, fileList) {
      let { status, msg } = response;
      if (status === 0) {
        this.refreshUnrosolveMessageList();
        return;
      }
      this.$alert(msg);
    },
    fileUploadFail (err, file, fileList) {
      this.$alert(err);
    },
    closeTag (filename) {
      this.$confirm(`确认删除${filename}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUpoladMessage(filename).then(res => {
          this.refreshUnrosolveMessageList();
        }).catch(errMsg => {
          this.$alert(errMsg);
        })
      }).catch(errMsg => {
        this.$alert(errMsg.msg);
      });
    }
  },

}
</script>
<style lang="stylus" scoped>
>>>.el-upload {
  width: 100%;

  .el-upload-dragger {
    width: 100%;
  }
}

.tag-group {
  border: 1px solid #ddd;
  padding: 2px;
  padding-bottom: 10px;

  .header {
    margin-bottom: 5px;
  }

  .el-tag--dark {
    margin-left: 10px;
    margin-bottom: 5px;
  }
}
</style>